<template>
  <div class="about">
    <!-- Hero Section -->
    <section class="hero relative h-[60vh] flex items-center justify-center text-white">
      <div class="absolute inset-0">
        <img
          src="https://images.unsplash.com/photo-1511818966892-d7d671e672a2"
          alt="关于我们"
          class="w-full h-full object-cover"
        />
        <div class="absolute inset-0 bg-black bg-opacity-50"></div>
      </div>
      <div class="relative text-center">
        <h1 class="text-5xl font-bold mb-4">关于我们</h1>
        <p class="text-xl max-w-2xl mx-auto">
          致力于记录和分享乡村生活的美好瞬间，让更多人了解乡村文化
        </p>
      </div>
    </section>

    <!-- Mission Section -->
    <section class="py-20 bg-white">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
          <h2 class="text-4xl font-bold mb-8">我们的使命</h2>
          <p class="text-xl text-gray-600 leading-relaxed">
            乡村视频平台致力于通过视频记录和分享乡村生活的美好瞬间，
            让更多人了解乡村文化，感受乡村魅力。我们希望通过这个平台，
            连接城市与乡村，传承传统文化，促进乡村发展。
          </p>
        </div>
      </div>
    </section>

    <!-- Values Section -->
    <section class="py-20 bg-gray-50">
      <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center mb-16">我们的价值观</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
          <div class="text-center">
            <div class="w-20 h-20 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i class="el-icon-star-on text-3xl text-primary"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4">品质至上</h3>
            <p class="text-gray-600">
              我们追求高品质的视频内容，为用户带来最佳的观看体验
            </p>
          </div>
          <div class="text-center">
            <div class="w-20 h-20 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i class="el-icon-share text-3xl text-primary"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4">开放共享</h3>
            <p class="text-gray-600">
              鼓励创作者分享优质内容，促进乡村文化的传播与交流
            </p>
          </div>
          <div class="text-center">
            <div class="w-20 h-20 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i class="el-icon-connection text-3xl text-primary"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4">连接城乡</h3>
            <p class="text-gray-600">
              搭建城市与乡村的桥梁，促进城乡文化交流与互动
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Team Section -->
    <section class="py-20 bg-white">
      <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center mb-16">我们的团队</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div
            v-for="member in teamMembers"
            :key="member.id"
            class="text-center"
          >
            <div class="relative w-48 h-48 mx-auto mb-6">
              <img
                :src="member.avatar"
                :alt="member.name"
                class="w-full h-full object-cover rounded-full"
              />
            </div>
            <h3 class="text-xl font-semibold mb-2">{{ member.name }}</h3>
            <p class="text-gray-600 mb-4">{{ member.position }}</p>
            <p class="text-sm text-gray-500">{{ member.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Join Us Section -->
    <section class="py-20 bg-primary text-white">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold mb-8">加入我们</h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto">
          我们始终在寻找热爱乡村文化、富有创造力的伙伴
        </p>
        <router-link
          to="/contact"
          class="inline-block bg-white text-primary px-8 py-4 rounded-full text-lg font-semibold hover:bg-gray-100 transition-colors duration-200"
        >
          联系我们
        </router-link>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const teamMembers = ref([
  {
    id: 1,
    name: '张三',
    position: '创始人 & CEO',
    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e',
    description: '乡村文化传播者，致力于推动乡村发展'
  },
  {
    id: 2,
    name: '李四',
    position: '内容总监',
    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80',
    description: '资深媒体人，专注乡村文化内容创作'
  },
  {
    id: 3,
    name: '王五',
    position: '技术总监',
    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e',
    description: '全栈开发专家，负责平台技术架构'
  },
  {
    id: 4,
    name: '赵六',
    position: '运营总监',
    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330',
    description: '新媒体运营专家，负责平台运营策略'
  }
])
</script>

<style scoped>
.about {
  overflow-x: hidden;
}

.hero {
  margin-top: -64px; /* 抵消导航栏的高度 */
}
</style> 